import {View} from 'react-native';
import {useAppTheme} from 'tsun-smart-ui';
import Svg, {Rect} from 'react-native-svg';

const Signal = ({signal, className}: {signal: number, className?: string}) => {
  const theme = useAppTheme();
  
  // 信号强度等级 (0-4)
  const signalLevel = Math.max(0, Math.min(4, Math.floor(signal / 25)));
  
  // 信号条配置
  const bars = [
    {height: 3},
    {height: 6},
    {height: 9},
    {height: 12},
  ];
  
  // 根据信号强度选择颜色
  const getSignalColor = (index: number) => {
    if (signalLevel === 0) return theme.colors?.neutral?.tip;
    if(index>signalLevel) return theme.colors?.neutral?.tip;
    return theme.colors?.success?.primary;
  };
  
  return (
    <View className={`flex-row items-end ${className}`}>
      <Svg width={14} height={13.08} viewBox="0 0 14 13.08">
        {bars.map((bar, index) => (
          <Rect
            key={index}
            x={1.2 + index * 3.6}
            y={13.08 - bar.height}
            width={2}
            height={bar.height}
            fill={getSignalColor(index)}
            rx={1}
          />
        ))}
      </Svg>
    </View>
  );
};

export default Signal;
